<template>
  <div id="box" ref="box">
    <router-view></router-view>
  </div>
</template>
<script>
  // 即时通讯工具页面设计
  // 按页面功能划分  注册、登录、列表、聊天、设置项..
  // 按代码功能划分  websocket通讯 http通讯  路由route 全局store状态管理
import {ref,onMounted} from "vue"
  export default {
    name: 'App',
    setup(){
      var  box = ref(null)
      onMounted(()=>{
        box.value.style.height = window.innerHeight  + 'px'
        window.addEventListener('resize',()=>{
         box.value.style.height = window.innerHeight  + 'px'
        })
      })
      return {
        box
      }     
    },
    data() {
      return {


      }
    },
    mounted() {
      
    }
  }
</script>

<style>
  *{
    box-sizing: border-box;
  }
  #app {
   
  }
  #box{
    margin: 0 auto;
    max-width:640px;
    background: #000;
    /* border:1px solid #eee; */
    /* box-shadow: 1px 1px 2px 5px #eee,-1px -1px 2px 5px #eee; */
    overflow: hidden;
  }
  .clear{
    clear:both;
  }
</style>
